<template class="login">
  <v-layout align-center justify-center column fill-height :style="{height:'80vh',backgroundColor:'#fafafa'}">
    <v-card :width="350">
      <v-container fluid grid-list-lg>
        <v-layout row wrap>
          <v-flex xs12>
            <v-layout align-center justify-space-around wrap>
              <v-avatar color="rgb(222, 4, 81)">
                <v-icon color="#fafafa">https</v-icon>
              </v-avatar>
            </v-layout>
            <v-flex class="text-xs-center">
              <h2>
                商户登陆
              </h2>
            </v-flex>
          </v-flex>
          <v-flex xs12>
            <v-form lazy-validation ref="form">
              <v-text-field v-model="mobile" :rules="mobileRules" label="手机号" validate-on-blur required></v-text-field>
              <v-text-field v-model="password" type="password" :rules="passwordRules" validate-on-blur label="密码" required></v-text-field>
              <v-checkbox v-model="storePassword" label="记住密码"></v-checkbox>
              <v-btn block color="info" @click="login" :loading="loading">登陆</v-btn>
            </v-form>
          </v-flex>
          <v-flex xs12>
            <v-layout row wrap justify-end>
              <v-btn flat right color="primary" :to="{path:'/register'}">立即注册</v-btn>
              <v-btn flat right color="primary" :to="{path:'/fogetpassword'}">忘记密码</v-btn>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
    <p class="commpany-info">2018&copy;北京开心贝科技有限公司</p>
  </v-layout>
</template>
<script>
import MD5 from "js-md5";
export default {
  data() {
    let cookieMobile = this.$cookie.get("mobile");
    let cookiePassword = this.$cookie.get("password");
    return {
      loading: false,
      storePassword: false,
      showAlert: false,
      mobile: cookieMobile ? cookieMobile : "",
      mobileRules: [
        v => !!v || "请输入手机号",
        v =>
          /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(
            v
          ) || "手机号不正确"
      ],
      password: cookiePassword ? cookiePassword : "",
      passwordRules: [
        v => !!v || "请输入密码 ",
        v => v.length > 5 || "密码最少6位"
      ]
    };
  },

  methods: {
    login() {
      // TODO 删除
      this.$router.push("/storeVoucher");
      if (this.$refs.form.validate()) {
        this.loading = true;
        this.$ajax
          .post("api/app/store/auth/login", {
            loginName: this.mobile,
            loginPass: MD5(this.password).toUpperCase()
          })
          .then(res => {
            console.log(res);
            if (res.status === 200) {
              if (this.storePassword === true) {
                this.$cookie.set("mobile", this.mobile, { expires: "30D" });
                this.$cookie.set("password", this.password, { expires: "1D" });
              } else {
                this.$cookie.delete("password");
              }
              this.$router.push("/storeVoucher");
            } else if (res.status === 403) {
              window.$error("帐号或密码错误");
            } else if (res.status === 500) {
              window.$error("服务器故障");
            } else {
              window.$error("网络错误");
            }
            this.loading = false;
          })
          .catch(err => {
            window.$error("系统错误");
            this.loading = false;
          });
      }
    }
  }
};
</script>
<style scoped>
.commpany-info {
  margin-top: 48px;
  margin-bottom: 32px;
  color: rgba(0, 0, 0, 0.54);
  text-align: center;
}
</style>
